import React ,{Component} from 'react';

import TabsEmpty from './tabsEmpty'
import { basicConfig } from '../../../static/js/config'
import {
    fSpecStr
} from '../../../static/js/common'
import {getNewDate,checkLoginStatus} from '../../../static/js/global'
import ClickLike from './clickLike'
var _icon = require('antd/lib/icon');
var _rate = require('antd/lib/rate');

class TabsThreeBottom extends Component {
	state = {
		
    }
	
	
    componentDidMount() {

    }
    render() {
    	let comtentList=this.props.bottomData;
    	let listData=[];
    	if (comtentList.list) {
    		for (var i=0;i<comtentList.list.length;i++) {
    			listData.push(comtentList.list[i])
    		}
    	}
        return(
        	<div>
        		{	
        			listData!=''?(
        				listData.map((item,i)=>{
	        				return <div className="bottomBox" key={i}>
	        							<div className="bottomBox1">
					        				<p className="bought">{item.user?item.user.nickname:''}</p>
					        				<p className="date">{item.gmtCreate?getNewDate(new Date(item.gmtCreate)):0}</p>
					        			</div>
					        			<div className="bottomBox2">
					        				<p className="content">{item.content}</p>
					        			</div>
					        			<div className="bottomBox3">
					        				<p className="say">{fSpecStr(item.speckeys)}</p>
					        			</div>
					        			<div className="bottomBox3">
					        				{
					        					item.reply?(
					        						<p className="say reply"><img src="../../static/img/shapeCopy.png"/><span className="replyFont"> Reply: </span>{item.reply.content}</p>
					        					):null
						        			}
					        			</div>
					        			<div className="bottomBox4">
					    					{
					        					<_rate style={{fontSize:32}}  allowHalf disabled defaultValue={item.score || 0} />
					        				}
					        				<div className="bottomBox4_right">
					        					<ClickLike commentItem={item}></ClickLike>
					        				</div>
					        			</div>
					        			<span className="bottomLine"></span>
					        		</div>
        				})
        			):<TabsEmpty/>
        		}
        	</div>
		)
    }
}

export default TabsThreeBottom